// 按照文档，引入
$('#image').cropper({
    // 纵横比(宽高比)
    aspectRatio: 1, // 正方形

    // 指定预览区域
    preview: '.img-preview' // 指定预览区的类名（选择器）
});
// 点击的转换
$('.upload-btn').on('click', function () {
    $('#file').click()
})

// 选择图片input注册change事件
$('#file').on('change', function () {

    // 1.得到图片对象
    let obj = this.files[0]
    // 2,专门方法：把图片对象转化为临时url地址：了解
    let url = URL.createObjectURL(obj)
    // 3，替换上面的图片
    // $('img')被cropper插件修改；
    $('#image').cropper('replace', url)
})
//图片文件
// JS对象转化为字符串：base64位字符串
// 前端页面：
// Img     地址
// CSS      地址
// 请求文件的资源：请求响应交互模型
// 百万并发：
// 未来减少请求
// 好处：图片信息之间随着页面的返回

// ***********************************************************确认
let layer = layui.layer
$('.sure').on('click', function () {
    let obj = $('#image').cropper('getCroppedCanvas', {
        width: 100,
        height: 100
    });
    // 把图片转成base64格式，得到超长字符串
    let base64 = obj.toDataURL('image/png');


    $.ajax({
        url: '/my/update/avatar',
        type: 'post',
        data: { avatar: base64 },
        success: function (res) {
            layer.msg(res.message)
            if (res.status == 0) {
                window.parent.getInfo()
            }
        }
    })
})

